<template>
  <div class="gzAccount" style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;">
    <div style="display: inline;" class="aForm">
      <el-form :inline="true" class="demo-form-inline" style="width:70%">
        <el-form-item label="" class="search_select">
          <el-select multiple collapse-tags clearable v-model="queryForm.gqIdList" filterable placeholder="工段">
            <el-option v-for="item in gongquList" :key="item.id" :label="item.gqName" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="search_select">
          <div class="gzAccount-add">
            <el-button type="success" class="bt_button" @click="getAccountList">生成台账</el-button>
            <el-button type="info" class="bt_button" v-if="hasRole('account:gz:export')" @click="exportTemplate" style="margin-left: 10px">导出</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: center;margin-bottom: 10px;font-weight: bold;font-size: 20px;color: #333333;">
        安徽江淮松芝空调有限公司工艺部工装台账</div>
    <!--<div style="text-align: center;margin-bottom: 10px;font-weight: bold; color: #1296db;font-size: 18px;">南京博士朗新工艺部工装台账</div>-->
    <wh-table :height="'530'" :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option"></wh-table>
    <form action="/autoMonitor/by/exportExcelData" method="post" style="display: none;" ref="downAccountLoadExcel"> 
    	<input name="json" :value="templateExcel.json" /> 
    	<input name="type" value="1" /> 
    	<input name="title" :value="currentImportName" /> 
    </form>
  </div>
</template>
<script>
  import { formatDate } from '@/utils/formatDate'
  import whTable from "@/components/wh-table/index";
  export default {
    name: 'gzAccount',
    data() {
      return {
        currentImportName: "",
        templateExcel: {
          json: ""
        },
        tableData: [],
        tableHeader: [],
        tableLoading: true,
        gongquList: [],
        queryForm: {
          gqIdList: []
        },
        option: {
          headerCell: {
            background: 'rgb(214, 215, 216)',
            color: 'rgba(0, 0, 0, 0.8)'
          }
        },
      }
    },
    components: {
      whTable
    },
    mounted() {
      this.getAccountList();
      this.getGongQuSelect();
      let date = formatDate(new Date(), "yyyy");
      this.currentImportName = date + "年工装台账";
    },
    methods: {
      getGongQuSelect() {
        let self = this;
        self.$http({
          url: "/autoMonitor/gd/queryGongDuanList",
          method: "post",
        }).then(resp => {
          if(resp.success) {
            self.gongquList = resp.result;
          }
        });
      },
      exportTemplate() {
        let self = this;
        let headers = {
          tableHeader: this.tableHeader,
          tableData: self.tableData
        };
        self.templateExcel.json = JSON.stringify(headers);
        self.$nextTick(() => {
          self.$refs.downAccountLoadExcel.submit();
        })
      },
      handleDefaultTab(result) {
        let self = this;
        // let condition = [];
        // let tableMap = {};
        // for(let data of result){
        //   let map = data.map;
        //   for(let key in map){
        //     data[key] =  map[key];
        //   }
        //   if(Object.keys(map) > Object.keys(tableMap)){
        //     tableMap = map;
        //   }
        // }
        // let i = 0;
        // for(let key in tableMap){
        //   let name = i%2 ==0?"日期":"数量";
        //   let _column =  {"columnName": key, "coloumNameCn": name};
        //   condition.push(_column);
        //   i++;
        // }
        // condition = i > 0?condition:[];
        self.tableHeader =  [{"columnName": "produceCode", "coloumNameCn": "产品图号"},
          {"columnName": "productName", "coloumNameCn": "产品名称"},
          {"columnName": "carType", "coloumNameCn": "车型"},
          {"columnName": "gzCode", "coloumNameCn": "工装编码"},
          {"columnName": "gzName", "coloumNameCn": "工装名称"},
          {"columnName": "gzCount", "coloumNameCn": "数量"},
          {"columnName": "deptName", "coloumNameCn": "领用部门"},
          {"columnName": "tokenUser", "coloumNameCn": "保管人"},
          {"columnName": "produceDate", "coloumNameCn": "投入日期"},
          {"columnName": "maintainPeriod", "coloumNameCn": "保养周期"},
          {"columnName": "maintainDate", "coloumNameCn": "下次维护时间"},
          {"columnName": "whMan", "coloumNameCn": "维护人"},
          // {"columnName": "", "coloumNameCn": "增补和报废情况","children":condition},
          // {"columnName": "totalCount", "coloumNameCn": "最新数量"},
          {"columnName": "remark", "coloumNameCn": "备注"},
        ];
      },
      getAccountList() {
        let self = this;
        self.tableLoading = true;
        self.$http({
          url: "/autoMonitor/gz/queryGongZhuangTaiZhang",
          method: "post",
          data: JSON.stringify(self.queryForm),
          dataType: 'json',
          contentType: "application/json",
        }).then(resp => {
          if(resp.success) {
            self.tableLoading = false;
            self.handleDefaultTab(resp.result);
            self.tableData = resp.result;
          }
        });
      },
    }
  }
</script>
<style>
  .gzAccount .el-tag--small {
    height: 20px;
    padding: 0 4px;
    line-height: 17px;
  }
  .gzAccount .el-select__tags {
    max-width: none !important;
  }
  .aForm .el-button--medium {
    padding: 5px 9px !important;
  }
  .gzAccount .el-date-editor.el-input,
  .userManage .el-date-editor.el-input__inner {
    width: auto;
  }
  .gzAccount .buttonAdd {
    float: right;
    margin-bottom: 10px;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
  }
  .aForm .el-form-item {
    margin-bottom: 5px !important;
  }
  .gzAccount .cell {
    text-align: center;
  }
  .tzButton .el-button--medium {
    padding: 8px 8px;
    font-size: 12px;
    border-radius: 4px;
  }
  .gzAccount .gzAccount-add .bt_button {
    height: 26px;
    border-radius: 13px;
    padding: 5px 12px !important;
  }
</style>